<template>
	<div class="notification-detail">
		<div class="detail-header">
			<div class="detail-title">{{ getDataValue('Title') || '系统通知' }}</div>
			<div class="detail-priority" :class="getPriorityClass(getDataValue('Priority'))">
				{{ getDataValue('Priority') }}
			</div>
		</div>

		<div class="detail-content">
			{{ getDataValue('Content') || '暂无内容' }}
		</div>

		<div class="detail-info">
			<div class="info-item">
				<span class="info-label">阅读状态:</span>
				<span class="info-value" :class="{ 'status-unread': getDataValue('Status') === '未读' }">
					{{ getDataValue('Status') }}
				</span>
			</div>
			<div class="info-item">
				<span class="info-label">是否置顶:</span>
				<span class="info-value">{{ getDataValue('IsTop') ? '是' : '否' }}</span>
			</div>
			<div class="info-item">
				<span class="info-label">消息分类:</span>
				<span class="info-value">{{ getDataValue('CategoryName') || '无分类' }}</span>
			</div>
			<div class="info-item">
				<span class="info-label">发送人:</span>
				<span class="info-value">{{ getDataValue('SenderName') || '系统' }}</span>
			</div>
			<div class="info-item">
				<span class="info-label">接收人:</span>
				<span class="info-value">{{ getDataValue('ReceiverName') || '当前用户' }}</span>
			</div>
		</div>

		<div class="detail-footer">
			<div class="footer-left">
				<div class="detail-time">{{ formatTime(getDataValue('SendTime')) }}</div>
				<div class="detail-sender" v-if="getDataValue('SenderName')">来自: {{ getDataValue('SenderName') }}</div>
			</div>
			<div class="footer-right">
				<el-button type="primary" size="small" @click="viewDocument" v-if="getDataValue('BusinessType') && getDataValue('BusinessId')">
					查看单据
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="NotificationDetail">
import { computed, onMounted } from 'vue';
import { openDynamicDetailDialog } from '/@/utils/dynamicComponent';

interface NotificationData {
	ID?: string;
	Title?: string;
	Content?: string;
	Priority?: string;
	SendTime?: string;
	SenderName?: string;
	ReceiverName?: string;
	BusinessType?: string;
	BusinessId?: string;
	PcRoute?: string;
	Status?: string;
	IsTop?: boolean;
	CategoryName?: string;
}

interface Props {
	notification?: NotificationData;
	wtmdata?: any;
}

const props = defineProps<Props>();

const emit = defineEmits<{
	'view-document': [];
	closeDialog: [];
	updateHeaderButtons: [
		buttons: Array<{
			text: string;
			type?: string;
			onClick: () => void;
			visible?: boolean;
		}>,
	];
}>();

// 计算属性，直接使用传递的数据
const notificationData = computed(() => {
	return props.wtmdata || props.notification || {};
});

// 统一的数据获取方法，支持直接访问和通过 Entity 访问
const getDataValue = (key: string): any => {
	const data = notificationData.value;

	// 特殊字段映射
	if (key === 'SenderName') {
		return data.Entity?.Sender || data.SenderName || data.Sender;
	}
	if (key === 'ReceiverName') {
		return data.Entity?.Receiver || data.ReceiverName || data.Receiver;
	}
	if (key === 'CategoryName') {
		return data.Entity?.Category?.Name || data.CategoryName || data.Category?.Name;
	}
	if (key === 'PcRoute') {
		return data.Entity?.Route?.PcRoute || data.Route?.PcRoute;
	}

	// 优先从 Entity 中获取，如果没有则直接从根级别获取
	return data.Entity?.[key] || data[key];
};

const getPriorityClass = (priority: string): string => {
	switch (priority) {
		case '紧急':
			return 'priority-danger';
		case '高':
			return 'priority-warning';
		case '普通':
			return 'priority-default';
		case '低':
			return 'priority-info';
		default:
			return 'priority-default';
	}
};

const formatTime = (time: string): string => {
	if (!time) return '';

	try {
		const date = new Date(time);
		const now = new Date();
		const diff = now.getTime() - date.getTime();
		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
		const hours = Math.floor(diff / (1000 * 60 * 60));
		const minutes = Math.floor(diff / (1000 * 60));

		if (days > 0) {
			return `${days}天前`;
		} else if (hours > 0) {
			return `${hours}小时前`;
		} else if (minutes > 0) {
			return `${minutes}分钟前`;
		} else {
			return '刚刚';
		}
	} catch (error) {
		return time;
	}
};

const viewDocument = async (): Promise<void> => {
	// 发射查看单据事件
	emit('view-document');

	// 获取正确的 BusinessId
	const businessId = getDataValue('BusinessId');

	// 构建传递给流程详情的数据
	const flowData = {
		...notificationData.value,
		ID: businessId, // 使用业务ID作为主键
		PersonId: businessId, // 传递业务ID作为人员ID
	};
	const PcRoute = getDataValue('PcRoute');

	if (PcRoute) {
		openDynamicDetailDialog(getDataValue('Title') || '流程详情', PcRoute, flowData, '70%', () => {});
	}
};
// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 设置头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: '关闭',
			type: 'default',
			onClick: onCancel,
			visible: true,
		},
	];
	emit('updateHeaderButtons', headerButtons);
};

// 组件挂载时设置头部按钮
onMounted(() => {
	setupHeaderButtons();
});
</script>

<style scoped lang="scss">
.notification-detail {
	width: 100%;
	max-width: 100%;
	padding: 32px;
	background: var(--el-bg-color);
	border-radius: 16px;
	position: relative;
	overflow: hidden;

	// 暗黑模式适配
	html.dark & {
		background: rgba(24, 24, 28, 0.95);
	}

	// 背景装饰
	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		height: 200px;
		background: radial-gradient(circle, rgba(64, 158, 255, 0.05) 0%, transparent 70%);
		z-index: 0;
		pointer-events: none;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 150px;
		height: 150px;
		background: radial-gradient(circle, rgba(64, 158, 255, 0.03) 0%, transparent 70%);
		z-index: 0;
		pointer-events: none;
	}

	// 确保内容在装饰层之上
	> * {
		position: relative;
		z-index: 1;
	}

	.detail-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 24px;
		gap: 16px;
		padding-bottom: 20px;
		border-bottom: 2px solid transparent;
		background: linear-gradient(90deg, var(--el-border-color-lighter) 0%, var(--el-color-primary-light-8) 30%, var(--el-border-color-lighter) 100%)
			bottom;
		background-size: 100% 2px;
		background-repeat: no-repeat;

		// 暗黑模式适配
		html.dark & {
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(64, 158, 255, 0.2) 30%, rgba(255, 255, 255, 0.05) 100%) bottom;
			background-size: 100% 2px;
			background-repeat: no-repeat;
		}

		.detail-title {
			flex: 1;
			font-weight: 700;
			font-size: clamp(18px, 2.2vw, 20px);
			color: var(--el-text-color-primary);
			line-height: 1.3;
			word-break: break-word;
			position: relative;

			&::before {
				content: '📢';
				margin-right: 12px;
				font-size: 24px;
				filter: drop-shadow(0 2px 4px rgba(64, 158, 255, 0.3));
			}
		}

		.detail-priority {
			font-size: 12px;
			padding: 6px 12px;
			border-radius: 16px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.8px;
			display: inline-block;
			flex-shrink: 0;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
				transition: left 0.5s ease;
			}

			&:hover::before {
				left: 100%;
			}

			&.priority-danger {
				background: linear-gradient(135deg, var(--el-color-danger) 0%, var(--el-color-danger-light-3) 100%);
				color: white;
				box-shadow: 0 4px 16px rgba(245, 108, 108, 0.4);
			}

			&.priority-warning {
				background: linear-gradient(135deg, var(--el-color-warning) 0%, var(--el-color-warning-light-3) 100%);
				color: white;
				box-shadow: 0 4px 16px rgba(230, 162, 60, 0.4);
			}

			&.priority-default {
				background: linear-gradient(135deg, var(--el-color-info) 0%, var(--el-color-info-light-3) 100%);
				color: white;
				box-shadow: 0 4px 16px rgba(144, 147, 153, 0.4);
			}

			&.priority-info {
				background: linear-gradient(135deg, var(--el-color-success) 0%, var(--el-color-success-light-3) 100%);
				color: white;
				box-shadow: 0 4px 16px rgba(103, 194, 58, 0.4);
			}
		}
	}

	.detail-content {
		color: var(--el-text-color-primary);
		line-height: 1.8;
		font-size: clamp(14px, 1.8vw, 16px);
		white-space: pre-wrap;
		word-break: break-word;
		text-align: justify;
		margin-bottom: 24px;
		padding: 24px;
		background: linear-gradient(135deg, var(--el-bg-color-page) 0%, rgba(64, 158, 255, 0.02) 100%);
		border-radius: 12px;
		border: 1px solid var(--el-border-color-lighter);
		position: relative;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

		// 暗黑模式适配
		html.dark & {
			background: linear-gradient(135deg, rgba(24, 24, 28, 0.8) 0%, rgba(64, 158, 255, 0.05) 100%);
			border: 1px solid rgba(255, 255, 255, 0.08);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 4px;
			height: 100%;
			background: linear-gradient(180deg, var(--el-color-primary) 0%, var(--el-color-primary-light-5) 100%);
			border-radius: 0 2px 2px 0;
		}

		&::after {
			content: '"';
			position: absolute;
			top: 16px;
			left: 16px;
			font-size: 48px;
			color: var(--el-color-primary-light-7);
			font-family: serif;
			line-height: 1;
			opacity: 0.3;
			z-index: 0;
		}

		// 富文本基础样式
		p {
			margin: 0 0 12px;
		}
		ul,
		ol {
			padding-left: 1.2em;
			margin: 0 0 12px;
		}
		img {
			max-width: 100%;
			height: auto;
			display: block;
			border-radius: 6px;
			margin: 8px 0;
		}
		table {
			width: 100%;
			border-collapse: collapse;
			margin: 8px 0 12px;
		}
		table th,
		table td {
			border: 1px solid var(--el-border-color-lighter);
			padding: 8px 10px;
			text-align: left;
		}
		pre,
		code {
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
		}
		pre {
			background: var(--el-bg-color-page);
			border: 1px solid var(--el-border-color-lighter);
			border-radius: 6px;
			padding: 10px 12px;
			overflow: auto;
		}

		// 确保文本在引号之上
		position: relative;
		z-index: 1;
	}

	.detail-info {
		margin-bottom: 24px;
		padding: 20px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px 16px;
		background: linear-gradient(135deg, var(--el-bg-color-page) 0%, rgba(64, 158, 255, 0.01) 100%);
		border-radius: 12px;
		border: 1px solid var(--el-border-color-lighter);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

		// 暗黑模式适配
		html.dark & {
			background: linear-gradient(135deg, rgba(24, 24, 28, 0.6) 0%, rgba(64, 158, 255, 0.03) 100%);
			border: 1px solid rgba(255, 255, 255, 0.05);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}

		.info-item {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			font-size: 14px;
			padding: 8px 0;
			border-bottom: 1px dashed var(--el-border-color-lighter);
			transition: all 0.3s ease;

			&:last-child {
				margin-bottom: 0;
				border-bottom: none;
			}

			&:hover {
				background: rgba(64, 158, 255, 0.03);
				margin: 0 -8px 12px -8px;
				padding: 8px 8px;
				border-radius: 6px;

				&:last-child {
					margin-bottom: -8px;
				}

				// 暗黑模式适配
				html.dark & {
					background: rgba(64, 158, 255, 0.08);
				}
			}

			.info-label {
				font-weight: 600;
				color: var(--el-text-color-secondary);
				min-width: 100px;
				margin-right: 12px;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: -6px;
					top: 50%;
					transform: translateY(-50%);
					width: 2px;
					height: 12px;
					background: var(--el-color-primary-light-7);
					border-radius: 1px;
				}
			}

			.info-value {
				color: var(--el-text-color-primary);
				flex: 1;
				font-weight: 500;

				&.status-unread {
					color: var(--el-color-danger);
					font-weight: 700;
					position: relative;

					&::before {
						content: '🔴';
						margin-right: 6px;
						font-size: 10px;
						animation: pulse 2s infinite;
					}
				}
			}
		}
	}

	.detail-footer {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
		padding-top: 20px;
		border-top: 2px solid transparent;
		background: linear-gradient(90deg, var(--el-border-color-lighter) 0%, var(--el-color-primary-light-8) 30%, var(--el-border-color-lighter) 100%)
			top;
		background-size: 100% 2px;
		background-repeat: no-repeat;

		// 暗黑模式适配
		html.dark & {
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(64, 158, 255, 0.2) 30%, rgba(255, 255, 255, 0.05) 100%) top;
			background-size: 100% 2px;
			background-repeat: no-repeat;
		}

		.footer-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8px;

			.detail-time {
				font-size: 13px;
				color: var(--el-text-color-secondary);
				display: flex;
				align-items: center;
				gap: 6px;
				font-weight: 500;
				padding: 4px 8px;
				background: var(--el-bg-color-page);
				border-radius: 6px;
				border: 1px solid var(--el-border-color-lighter);
				width: fit-content;

				// 暗黑模式适配
				html.dark & {
					background: rgba(24, 24, 28, 0.6);
					border: 1px solid rgba(255, 255, 255, 0.05);
				}

				&::before {
					content: '⏰';
					font-size: 12px;
					opacity: 0.8;
				}
			}

			.detail-sender {
				font-size: 13px;
				color: var(--el-text-color-secondary);
				font-style: italic;
				display: flex;
				align-items: center;
				gap: 6px;
				font-weight: 500;
				padding: 4px 8px;
				background: var(--el-bg-color-page);
				border-radius: 6px;
				border: 1px solid var(--el-border-color-lighter);
				width: fit-content;

				// 暗黑模式适配
				html.dark & {
					background: rgba(24, 24, 28, 0.6);
					border: 1px solid rgba(255, 255, 255, 0.05);
				}

				&::before {
					content: '👤';
					font-size: 12px;
					opacity: 0.8;
				}
			}
		}

		.footer-right {
			flex-shrink: 0;

			.el-button {
				font-size: 14px;
				font-weight: 600;
				padding: 10px 20px;
				height: 38px;
				line-height: 16px;
				border-radius: 10px;
				box-shadow: 0 3px 12px rgba(64, 158, 255, 0.25);
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-4) 100%);
				border: none;
				color: white;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					transition: left 0.5s ease;
				}

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 8px 24px rgba(64, 158, 255, 0.4);

					&::before {
						left: 100%;
					}
				}

				&:active {
					transform: translateY(-1px);
				}
			}
		}
	}

	// 脉冲动画
	@keyframes pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
	}

	// 入场动画
	&.detail-enter-active {
		animation: slideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}

	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(30px) scale(0.95);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	// 尊重系统“减少动态效果”设置
	@media (prefers-reduced-motion: reduce) {
		* {
			animation: none !important;
			transition: none !important;
		}
	}

	// 响应式设计
	@media (max-width: 1024px) {
		padding: 24px;
		max-width: 100%;

		.detail-header .detail-title {
			font-size: 19px;
		}

		.detail-content {
			font-size: 15px;
			padding: 20px;
		}
	}

	@media (max-width: 768px) {
		padding: 20px;
		max-width: 100%;

		.detail-info {
			grid-template-columns: 1fr;
		}

		.detail-header .detail-title {
			font-size: 18px;
		}

		.detail-content {
			font-size: 15px;
			padding: 20px;
		}

		.detail-footer {
			flex-direction: column;
			gap: 16px;

			.footer-right {
				align-self: flex-end;
			}
		}
	}

	@media (max-width: 576px) {
		padding: 16px;

		.detail-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
			.detail-title {
				font-size: 17px;
				&::before {
					font-size: 20px;
					margin-right: 8px;
				}
			}
			.detail-priority {
				order: 2;
				margin-top: 4px;
			}
		}

		.detail-content {
			padding: 16px;
			font-size: 14px;
			&::after {
				display: none;
			}
		}

		.detail-info {
			padding: 16px;
			.info-item {
				flex-direction: column;
				align-items: flex-start;
				.info-label {
					min-width: auto;
					margin-right: 0;
					margin-bottom: 4px;
					&::after {
						display: none;
					}
				}
				.info-value {
					width: 100%;
				}
			}
		}

		.detail-footer {
			flex-direction: column;
			align-items: stretch;
			.footer-right {
				.el-button {
					width: 100%;
					height: 38px;
					padding: 10px 16px;
				}
			}
		}
	}

	@media (max-width: 480px) {
		.detail-header .detail-title {
			font-size: 16px;
		}
		.detail-footer .footer-left {
			.detail-time,
			.detail-sender {
				font-size: 12px;
			}
		}
	}

	// 大屏信息区两列布局
	@media (min-width: 1025px) {
		.detail-info {
			grid-template-columns: 1fr 1fr;
		}
	}
}
</style>
